<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/include/taglib.jsp"%>
	
	<script src="${ctx}/js/controllers/base/cellhouse/CellHouseListController.js" type="text/javascript"></script>
          <section>
              <div style="height:40px;line-height: 40px;">
                    <div class="forword_area"></div>
					<div class="location">当前位置：${sessionScope.currcent_position}</div>

              </div>
              <hr>
              <section>
                <!--begin 搜索栏 -->
                <div class="panel">
	                  <div style="float:left;height: 28px;">
	                    <input id="keyword" type="text" maxlength="20" value="${(not empty keyword)? keyword : ''  }" class="input-sm" placeholder="关键字">
			          </div>
		            	<div class="btn-group">
				             <select id="houseType" name="houseType" class="dropdown-menu">
									<option value="" >全部房屋类型</option>
									<c:forEach items="${houseTypes }" var="house"><option value="${house.value }" <c:if test="${houseType == house.value }">selected</c:if>>${house.label }</option></c:forEach>
							 </select>
		            	</div>
			            	
		            	<div class="btn-group">
				             <select id="houseState" name="houseState" class="dropdown-menu">
									<option value="" >全部房屋状态</option>
									<c:forEach items="${houseStates }" var="state"><option value="${state.value }" <c:if test="${houseState == state.value }">selected</c:if>>${state.label }</option></c:forEach>
							 </select>
		            	 </div>
			            	
		            	<div class="btn-group">
				             <select id="regionId" name="cellRegion" class="dropdown-menu">
									<option value="" >小区区域</option>
									<c:forEach items="${cellRegions }" var="region"><option value="${region.id }" <c:if test="${regionId == region.id }">selected</c:if>>${region.name }</option></c:forEach>
							 </select>
		            	 </div>
			             
			          	<div class="btn-group">
							<select class="dropdown-menu" id="pSize">
								<c:forEach items="${pageSizes }" var="item">
									<option value="${item.value }"
										<c:if test="${pSize == item.value }">selected</c:if>>&nbsp;&nbsp;&nbsp;${item.label }</option>
								</c:forEach>
							</select>
						</div>
			             <div class="form-control">
			                 <div class="search" onclick="getCellHouseList();" ><img src="${ctx }/images/table/search_second.png"></div>
			               	 <div class="search" onclick="saveOrUpdate();" ><img src="${ctx }/images/table/add_second.png"></div>
			                 <div class="delete"  style="float:left;" onclick="deleteByIds();"><img src="${ctx }/images/table/del_second.png"></div>
			                 <div style="width:70px;height:25px;margin-left:10px;padding-top:3px;padding-left:10px;background-color:#37ced4;
								color:white;cursor: pointer;float:left;" onclick="initCellHouse();">批量导入</div>
								<div style="width:45px;height:25px;margin-left:10px;padding-top:3px;padding-left:10px;background-color:#37ced4;
								color:white;cursor: pointer;float:left;" onclick="exportExcel();">导出</div> 
			             </div>
                </div><!--end 搜索栏 -->

                <!--begin table表格 -->
                <div>
                <table class="table">
                    <thead>
                      <tr>
                      	<th width="3%">
                             <img id="all" type="checkbox" onclick="selectAll(this)" src="${ctx }/images/tables/wugou.png" style="margin-bottom: 1px;">
                        </th>
                        <th width="5%">序号</th>
                        <th width="8%">小区名</th>
                        <th width="8%">区域</th>
                        <th width="8%">栋</th>
                        <th width="8%">单元</th>
                        <th width="12%">房间号</th>
                        <th width="12%">业主姓名</th>
                        <th width="8%">电话联系方式</th>
                        <th width="12%">操作</th>
                      </tr>
                    </thead>
                    <tbody id="tableTbody">
                      	<c:forEach items="${cellHouse.list }" var="cellHouse" varStatus="cellHouseStatus">
	                      <tr onmouseover="mouseoverOne(this)" onmouseout="mouseoutOne(this)">
	                      	<td>
	                      		<img id="house${cellHouse.id}" name="houseChecked" class="${cellHouse.id}" onclick="selectOne('${cellHouse.id}',this)" src="${ctx }/images/tables/wugou.png">
	                      	</td>
	                        <td>${cellHouseStatus.index + 1 }</td>
	                        <td>${cellHouse.cellName}</td>
	                        <td>${cellHouse.regionName}</td>
	                        <td>${cellHouse.buildingName}</td>
	                        <td>${cellHouse.unitName}</td>
	                        <c:choose>
	                        <c:when test="${fn:length(cellHouse.name) > 8}">
	                        	<td id="name${cellHouse.id}" onmouseover="mouseOverName(${cellHouse.id} , '${cellHouse.name}')" onmouseout="mouseOutName(${cellHouse.id} , '${cellHouse.name}')">${fn:substring(cellHouse.name , 0 , 8)}...</td>
	                        </c:when>
	                        <c:otherwise>
	                        	<td id="name${cellHouse.id}">${cellHouse.name}</td>
	                        </c:otherwise>
	                        </c:choose>
	                        <c:choose>
	                        <c:when test="${fn:length(cellHouse.ownerName1) > 8}">
	                        	<td id="oName${cellHouse.id}" onmouseover="mouseOverOName(${cellHouse.id} , '${cellHouse.ownerName1}')" onmouseout="mouseOutOName(${cellHouse.id} , '${cellHouse.ownerName1}')">${fn:substring(cellHouse.ownerName1 , 0 , 8)}...</td>
	                        </c:when>
	                        <c:otherwise>
	                        	<td id="oName${cellHouse.id}">${cellHouse.ownerName1}</td>
	                        </c:otherwise>
	                        </c:choose>
	                        <td>${cellHouse.ownerPhone1}</td>
	                        <td >
	                          <a class="fa fa-check " onclick="saveOrUpdate('${cellHouse.id}');">编辑</a>
	                          <span>&nbsp;|</span>
	                          <a class="fa fa-check " onclick="detailCellHouseInfo('${cellHouse.id}');">详情</a>
	                          <%-- <span>&nbsp;|</span>
	                          <a class="fa fa-check " title="置顶" onclick="updateSort('${cellHouse.id}');">置顶</a> --%>
	                        </td>
	                      </tr>
                      	</c:forEach>
                    </tbody>               
                                      
                    <tfoot>
		            	<tr>
			               <td colspan="10">
			                  <div>
			                    <div style="float:left;">
			                      <span class="total">合计 ${cellHouse.total} 条数据</span> 
			                      <input type="hidden" value="${cellHouse.total}" id="total">              
			                    </div>
			                    <div style="float:right;  margin-right: 10px;margin-top: 29px"> 
				                  <div style="float:left;">                 
				                      <ul class="footer_ul">
				                      	<c:if test="${cellHouse.hasPreviousPage }">
				                        <li onclick="gotoPage(${currentPage-1 });"><a class="leftRight">&lt;&lt;</a></li>
				                      	</c:if>
				                        <c:if test="${cellHouse.firstPage > 1}">
				                        	<li onclick="gotoPage(1);" style="border: 1px solid #9A9A9A;">
				                             	<a>1</a>
				                        	</li>
				                        	<c:if test="${cellHouse.firstPage > 2}">
				                        		...
				                        	</c:if>
				                      	</c:if>
				                        <c:forEach items="${cellHouse.navigatepageNums }" var="page">
				                        <li onclick="gotoPage(${page });" class="<c:if test="${currentPage == page }">active</c:if>" style="border: 1px solid #9A9A9A;">
				                             <a>${page}</a>
				                        </li>
				                        </c:forEach>
				                        <c:if test="${cellHouse.lastPage < cellHouse.pages}">
				                        	<c:if test="${cellHouse.firstPage < cellHouse.pages - 1}">
				                        		...
				                        	</c:if>
				                        	<li onclick="gotoPage(${cellHouse.pages});" style="border: 1px solid #9A9A9A;">
				                             	<a>${cellHouse.pages}</a>
				                        	</li>
				                      	</c:if>
				                        <c:if test="${cellHouse.hasNextPage }">
				                        <li><a onclick="gotoPage(${currentPage+1});" class="leftRight">&gt;&gt;</a></li>
				                      	</c:if>
				                      </ul>
			                     </div>
		                   		<div style="float:left;  height: 30px;">
									<span style="color: #9A9A9A;">跳转到</span> 
									<input class="inputclass" id="pageNo" onkeydown="if(event.keyCode==13){event.keyCode=0;return false;}" type="text" value="${currentPage }" style="width:26px;height:28px"onkeyup = "checInputNum(this)">
									<span style="color: #9A9A9A;">页</span> 
									<span class="buttonclass" id="J_JumpTo" onclick="gotoCellHousePage(null);"><a>GO</a></span>
								</div>
			                 </div>
			                 </div>
							</td>
						</tr>
					</tfoot>
                  </table>
                  
                </div>
                <%@include file="/views/common/footer.jsp"%>
              </section>
            </section>
		<script type="text/javascript">
		var ctx = '${ctx}';
		setCtx(ctx);
		
		//实现选中取消切换图片
		$("tbody td>img").toggle(function(){    
		    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
		    //$(this).parents("tr").children().each(function(){
			   // $(this).css("background","#D3F0F1");
		   //});    
		},function(){    
		    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
		    //$(this).parents("tr").children().each(function(){
			    //$(this).css("background","");
		   //});
		    });
		    
		//实现全选切换所有选项图标
		$("#all").toggle(function(){    
		    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
		    $("tbody td>img").attr("src","${ctx }/images/tables/honggou.png");  
		},function(){    
		    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
		    $("tbody td>img").attr("src","${ctx }/images/tables/wugou.png");  
		    });
	</script>
	<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
	<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
